<script>
import { defineAsyncComponent } from 'vue';

import Email from '@/components/LoginEmail.vue';
import Account from '@/components/LoginAccount.vue';

import Loading from '@/components/Loading.vue';
import Error from '@/components/Error.vue';

export default {
  name: 'root component',
  components: {
    Email,
    Account,
    Welcome: defineAsyncComponent({
      // 加载函数: 用来异步加载组件的函数
      loader: () => {
        console.log( '异步加载组件' );
        return new Promise( (resolve, reject) => {
          setTimeout( () => {
            console.log( '加载组件' );
            resolve( import('@/components/Welcome.vue') );
            // reject('hello');
          }, 100);
        });
      },
      // 加载异步组件时使用的组件
      loadingComponent: Loading,
      // 展示加载组件前的延迟时间，默认为 2000ms
      delay: 200,
      // 加载失败后展示的组件
      errorComponent: Error,
      // 如果提供了一个 timeout 时间限制，并超时了
      // 也会显示这里配置的报错组件，默认值是：Infinity
      timeout: 3000
    })
  },
  data() {
    return {
      componentName: 'Email'
    }
  },
  updated() {
    console.log( 'root component updated.');
  }
}
</script>

<template>
  <el-container>
    <el-header></el-header>
    <el-main>
      <h3>动态组件</h3>
      <KeepAlive>
        <component v-bind:is="componentName"></component>
      </KeepAlive>
      <p>
        <input type="radio" v-model="componentName" value="Email">使用邮箱登录
        <input type="radio" v-model="componentName" value="Account">使用账号登录
      </p>
      <p>
        <a href="https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components">动态组件</a>
        |
        <a href="https://cn.vuejs.org/guide/built-ins/keep-alive.html">KeepAlive</a>
      </p>
      <h3>异步组件</h3>
      <Welcome></Welcome>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<style lang="less">
</style>
